$(function () {
  let index = 0
  let btn = $('.dian>li')
  let img = $('.banner li')
  let main = $('.body-main')
  let timer = null
  let left = $('.main_btn_left')
  let right = $('.main_btn_right')

  btn.click(function () {
    index = $(this).index()
    if (index == 4) {
      img.eq(0).css('zIndex', 1)
    }
    play()
  })
  timer = setInterval(function () {
    index++
    play()
  }, 2000)
  main.hover(function () {
    clearInterval(timer)
  }, function () {
    timer = setInterval(function () {
      index++
      play()
    }, 2000)
  })
  left.click(function () {
    index--
    if (index == -1) {
      index = 4
    }
    play()
  })
  right.click(function () {
    index++
    play()
  })
  function play() {
    if (index == btn.length) {
      index = 0
      img.eq(0).css('zIndex', 1)
    }
    btn.eq(index).addClass('on').siblings().removeClass('on')
    img.eq(index).animate({
      opacity: 1,
      zIndex: 0
    }, 500)
    img.eq(index).siblings().css({
      'opacity': 0
    })
  }
})